
<template>
    <div
      class="draggable-panel"
      :style="panelStyle"
      @mousedown="startDrag"
    >
      <div class="draggable-panel-header" ref="head">
        <slot name="header">Draggable Panel</slot>
      </div>
      <div class="draggable-panel-content" :style="contentStyle">
        <slot v-if="flesh">Panel Content</slot>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted, watch } from 'vue';
  import { toRefs } from 'vue';
  const flesh=ref(true)
  const head=ref()
  // 定义 props
  const props = defineProps({
    width: {
      type: String,
      default: '80vw'
    },
    height: {
      type: String,
      default: '80vh'
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled:{
      type:Boolean,
      default:false
    }
  });
  
  // 解构 props
  const { width, height, x, y } = toRefs(props);
  
  // 初始化位置
  const position = ref({ x: x.value, y: y.value });
  const dragging = ref(false);
  const offset = ref({ x: 0, y: 0 });
  const w=ref(width.value)
  const h=ref(height.value)
  // 计算面板样式
  const panelStyle = computed(() => ({
    width: w.value,
    height: h.value,
    top: `${position.value.y}px`,
    left: `${position.value.x}px`
  
  }));
  watch(()=>props.disabled,(n)=>{
    //  console.log(n);
     position.value.x=n?0:30
     position.value.y=n?0:30
     w.value=n?'100vw':'80vw'
     h.value=n?'100vh':'80vh'
     flesh.value=false
     setTimeout(()=>{
      flesh.value=true
     })
    //  console.log(width);
     
  })

  const contentStyle=computed(()=>{
    return {
      height:`calc(${h.value} - ${head.value?.offsetHeight}px)`
    }
  })
  const startDrag = (event) => {
    // console.log(props.disabled);
    
    if(props.disabled){
      return
    }
    dragging.value = true;
    offset.value.x = event.clientX - position.value.x;
    offset.value.y = event.clientY - position.value.y;
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', stopDrag);
  };
  
  const onDrag = (event) => {
    if (dragging.value&&!props.disabled) {
      position.value.x = event.clientX - offset.value.x;
      position.value.y = event.clientY - offset.value.y;
    }
  };
  
  const stopDrag = () => {
    dragging.value = false;
    document.removeEventListener('mousemove', onDrag);
    document.removeEventListener('mouseup', stopDrag);
  };
  </script>
  
  <style scoped>
  .draggable-panel {
    position: fixed;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .draggable-panel-header {
    padding: 10px;
    cursor: grab;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
  }
  
  .draggable-panel-header:active {
    cursor: grabbing;
  }
  
  .draggable-panel-content {
    padding: 10px;
  }
  </style>
  
